<template>
    <div class="PositionView" :class="{ 'ReadOnly': ReadOnly }">
        <div class="Text">
            <div class="text">经</div>
            <div class="text">纬</div>
        </div>
        <div class="inputs" v-if="Status">
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" size="small" :controls="false"
                    :bordered="false" v-model:value="longitude" :min="-180" :max="180" />
            </div>
            <div class="inputBox" v-else>{{ longitude }}</div>
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" size="small" :controls="false"
                    :bordered="false" v-model:value="latitude" :min="-90" :max="90" />
            </div>
            <div class="inputBox" v-else>{{ latitude }}</div>
        </div>
        <div class="inputs" v-if="!Status">
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small"
                    :controls="false" :bordered="false" v-model:value="longitudeDegree.degree"
                    :min="-180" :max="180" />
                <span>°</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small"
                    :controls="false" :bordered="false" v-model:value="longitudeDegree.minute" :min="0"
                    :max="59" />
                <span>′</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="1" size="small"
                    :controls="false" :bordered="false" v-model:value="longitudeDegree.second" :min="0"
                    :max="59" />
                <span>″</span>
            </div>
            <div class="inputBox" v-else>
                {{ longitudeDegree.degree }}°
                {{ longitudeDegree.minute }}′
                {{ longitudeDegree.second }}″
            </div>
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small"
                    :controls="false" :bordered="false" v-model:value="latitudeDegree.degree"
                    :min="-180" :max="180" />
                <span>°</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small"
                    :controls="false" :bordered="false" v-model:value="latitudeDegree.minute" :min="0"
                    :max="59" />
                <span>′</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="1" size="small"
                    :controls="false" :bordered="false" v-model:value="latitudeDegree.second" :min="0"
                    :max="59.99" />
                <span>″</span>
            </div>
            <div class="inputBox" v-else>
                {{ latitudeDegree.degree }}°
                {{ latitudeDegree.minute }}′
                {{ latitudeDegree.second }}″
            </div>
        </div>
        <div class="Button" @click="Status = !Status">
            <swap-outlined />
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { SwapOutlined } from '@ant-design/icons-vue';

const emit = defineEmits(['UpdateEvent']);

const props = defineProps(['option', 'Value']);
const required = ref(false);

const ReadOnly = ref(true);

const Status = ref(true);

function DDDToDMS(_data) {
    let value = parseFloat(_data);
    let _d = Math.floor(value);//度
    return {
        degree: Math.floor(value),
        minute: Math.floor((value - _d) * 60),
        second: parseFloat((value - _d) * 3600 % 60).toFixed(1)
    };
}

function DMSToDDD(_data) {
    let res = Math.abs(_data.degree) + (Math.abs(_data.minute) / 60 + Math.abs(_data.second) / 3600);
    res = parseFloat(res).toFixed(6);
    return res;
}

const longitude = ref(0);
const latitude = ref(0);

watch(() => props.Value[props.Keys[0]], (val) => { longitude.value = val }, { immediate: true });
watch(() => props.Value[props.Keys[1]], (val) => { latitude.value = val }, { immediate: true });


const longitudeDegree = ref({
    degree: 0,
    minute: 0,
    second: 0
})

const latitudeDegree = ref({
    degree: 0,
    minute: 0,
    second: 0
})


watch(longitude, val => {
    if (Status.value) {
        longitudeDegree.value = DDDToDMS(val);
    }
    emit('UpdateEvent', 'UpdateValue', props.Keys[0], val)
})

watch(latitude, val => {
    if (Status.value) {
        latitudeDegree.value = DDDToDMS(val);
    }
    emit('UpdateEvent', 'UpdateValue', props.Keys[1], val)
})

watch(longitudeDegree, val => {
    if (!Status.value) {
        longitude.value = DMSToDDD(val);
    }
}, { deep: true })

watch(latitudeDegree, val => {
    if (!Status.value) {
        latitude.value = DMSToDDD(val);
    }
}, { deep: true })

defineExpose();
</script>
<style lang="less" scoped></style>